<!DOCTYPE html>
<html>
<head>
  <title>Relativity Frames Diagram</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    canvas {
      border: 1px solid #ccc;
      background-color: white;
    }
  </style>
</head>
<body>
  <canvas id="relativityCanvas" width="600" height="300"></canvas>
  <script>
    const canvas = document.getElementById('relativityCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    
    // Helper function to draw an arrow with a filled head
    function drawArrow(x1, y1, x2, y2) {
        const headlen = 10;
        const dx = x2 - x1;
        const dy = y2 - y1;
        const angle = Math.atan2(dy, dx);
        
        // Main line
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();

        // Arrowhead
        ctx.save();
        ctx.beginPath();
        ctx.translate(x2, y2);
        ctx.rotate(angle);
        ctx.moveTo(0, 0);
        ctx.lineTo(-headlen, headlen / 2);
        ctx.lineTo(-headlen, -headlen / 2);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

    // --- Define Coordinates ---
    const y_center = 160;
    const x_offset = 2; // for double line

    const s_origin_x = 130;
    const s_prime_origin_x = 165;
    
    const y_axis_top = 40;
    const y_axis_bottom = 280;

    const x_axis_start = 40;
    const x_axis_end = 550;

    // --- Draw S frame ---
    ctx.font = "italic 22px 'Times New Roman'";
    // Y-axis for S
    drawArrow(s_origin_x, y_axis_bottom, s_origin_x, y_axis_top);
    ctx.fillText('y', s_origin_x + 10, y_axis_top + 20);
    // Origin O
    ctx.fillText('O', s_origin_x - 25, y_center + 25);
    // Frame label S
    ctx.font = "24px 'KaiTi', 'SimSun'";
    ctx.fillText('S系', 70, 70);
    
    // --- Draw S' frame ---
    ctx.font = "italic 22px 'Times New Roman'";
    // Y'-axis for S'
    drawArrow(s_prime_origin_x, y_axis_bottom, s_prime_origin_x, y_axis_top);
    ctx.fillText("y'", s_prime_origin_x + 10, y_axis_top + 20);
    // Origin O'
    ctx.fillText("O'", s_prime_origin_x - 10, y_center + 25);
    // Frame label S'
    ctx.font = "24px 'KaiTi', 'SimSun'";
    ctx.fillText("S'系", 280, 70);

    // --- Draw common X / X' axis (double line) ---
    ctx.beginPath();
    ctx.moveTo(x_axis_start, y_center - x_offset);
    ctx.lineTo(x_axis_end, y_center - x_offset);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(x_axis_start, y_center + x_offset);
    ctx.lineTo(x_axis_end, y_center + x_offset);
    ctx.stroke();
    
    // Arrowhead for the double line
    ctx.beginPath();
    ctx.moveTo(x_axis_end, y_center - x_offset - 1);
    ctx.lineTo(x_axis_end + 15, y_center);
    ctx.lineTo(x_axis_end, y_center + x_offset + 1);
    ctx.closePath();
    ctx.fill();

    // Labels for x/x'
    ctx.font = "italic 22px 'Times New Roman'";
    ctx.fillText("x'", x_axis_end, y_center - 15);
    ctx.fillText('x', x_axis_end, y_center + 25);
    
    // --- Draw Particle P ---
    const p_pos_x = 190;
    ctx.beginPath();
    ctx.arc(p_pos_x, y_center, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('P', p_pos_x - 8, y_center - 18);

    // --- Draw Force/Acceleration Vector ---
    const force_start_x = p_pos_x + 15;
    const force_end_x = force_start_x + 100;
    drawArrow(force_start_x, y_center, force_end_x, y_center);
    // Label F'_x, a (drawn in parts for subscript effect)
    const label_y = y_center - 15;
    ctx.fillText("F", 240, label_y);
    ctx.fillText("'", 252, label_y - 5);
    ctx.font = "italic 16px 'Times New Roman'";
    ctx.fillText("x", 258, label_y + 5);
    ctx.font = "italic 22px 'Times New Roman'";
    ctx.fillText(", a", 268, label_y);

    // --- Draw Velocity Vector v ---
    const v_arrow_x = 480;
    drawArrow(v_arrow_x, y_center, v_arrow_x + 100, y_center);
    ctx.fillText('v', v_arrow_x + 45, y_center - 15);

  </script>
</body>
</html>